<template>
  <div class="classbox">
    <a-card title="活动列表" style="width: 100%">
      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="openmodal">新增活动</a-button>
      </div>
      <a-divider />
      <div class="class_table">
        <a-table
          :columns="columns"
          :rowKey="activityList => activityList.id"
          :dataSource="activityList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination">
          <div slot="active" slot-scope="row">
            <span class="goodsurl quan" @click="doedit(row)">改</span>
          </div>
        </a-table>
        <a-modal
          :title="isadd===true?'新增活动':'修改活动'"
          :visible="visible"
          :confirm-loading="confirmLoading"
          ok-text="确认"
          cancel-text="取消"
          @ok="dochange()"
          @cancel="handleCancel">

          <div class="display">
            <span style="dispaly:inline-block;width:80px;margin-right:10px">分类名称</span>
            <a-input placeholder="请输入活动名称" v-model="form.activity_name" allowClear />
          </div>
          <div class="display">
            <span style="dispaly:inline-block;width:80px;margin-right:10px">选择时间</span>
            <div class="display">
              <a-date-picker
                v-model="startValue"
                :disabled-date="disabledStartDate"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间"
                @openChange="handleStartOpenChange" />
              <a-date-picker
                v-model="endValue"
                :disabled-date="disabledEndDate"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间"
                :open="endOpen"
                @openChange="handleEndOpenChange" />
            </div>
          </div>

        </a-modal>
      </div>
    </a-card>

  </div>
</template>

<script>
  import {
    getAdminActivityList,
    addActivity,
    updateActivity
  } from '@/api/activity'
  import Moment from 'moment'

  export default {
    name: 'Class',
    data () {
      return {
        startValue: null,
        endValue: null,
        endOpen: false,
        isadd: false,
        visible: false,
        confirmLoading: false,
        count: 0,
        columns: [{
            title: 'ID',
            width: 150,
            align: 'center',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '活动名称',
            align: 'center',
            dataIndex: 'activity_name',
            scopedSlots: {
              customRender: 'activity_name'
            }
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'start_time',
            scopedSlots: {
              customRender: 'start_time'
            }
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'end_time',
            scopedSlots: {
              customRender: 'end_time'
            }
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'create_at',
            scopedSlots: {
              customRender: 'create_at'
            }
          },
          {
            title: '修改时间',
            align: 'center',
            dataIndex: 'update_at',
            scopedSlots: {
              customRender: 'update_at'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }

        ],
        pagination: {
          pageSize: 15,
          page: 1
        },
        loading: false,
        activityList: [],
        balist: [],
        form: {
          activity_id: '',
          activity_name: '',
          start_time: '',
          end_time: ''
        }
      }
    },

    computed: {

    },
    created () {
      this.getAdminActivityList(1, 15)
    },
    mounted () {

    },
    // watch: {
    //   startValue (val) {
    //     console.log('startValue', val)
    //   },
    //   endValue (val) {
    //     console.log('endValue', val)
    //   }
    // },
    methods: {
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getAdminActivityList(params.page, 15)
      },
      disabledStartDate (startValue) {
        const endValue = this.endValue
        if (!startValue || !endValue) {
          return false
        }
        return startValue.valueOf() > endValue.valueOf()
      },
      disabledEndDate (endValue) {
        const startValue = this.startValue
        if (!endValue || !startValue) {
          return false
        }
        return startValue.valueOf() >= endValue.valueOf()
      },
      handleStartOpenChange (open) {
        if (!open) {
          this.endOpen = true
        }
      },
      handleEndOpenChange (open) {
        this.endOpen = open
      },
      doedit (row) {
        // console.log(row)
        this.form = row
        this.startValue = Moment(parseInt(row.start_time + '000'))
        this.endValue = Moment(parseInt(row.end_time + '000'))
        this.form.activity_id = row.id
        this.isadd = false
        this.visible = true
      },
      handleCancel () {
        this.visible = false
        this.form = this.$options.data().form
        this.startValue = null
        this.endValue = null
      },
      openmodal () {
        this.isadd = true
        this.visible = true
      },
      dochange () {
        this.form.start_time = parseInt(Moment(this.startValue).valueOf() / 1000)
        this.form.end_time = parseInt(Moment(this.endValue).valueOf() / 1000)
        if (this.isadd === true) {
          addActivity(this.form).then(res => {
            // console.log('新增返回', res)
            if (res.code === 200) {
              this.$message.success('新增成功!')
              this.handleCancel()
              this.getAdminActivityList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          updateActivity(this.form).then(res => {
            // console.log('修改返回', res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.handleCancel()
              this.getAdminActivityList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },

      // 获取分类列表
      getAdminActivityList (page, pagesize) {
        this.loading = true

        getAdminActivityList({
            page: page,
            pagesize: parseInt(pagesize)
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('文章列表返回', res)
              this.count = res.data.count
              this.activityList = res.data.data
              const pagination = {
                ...this.pagination
              }
              pagination.total = res.data.count
              this.pagination = pagination
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .display {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: right;
    margin-bottom: 10px;
  }

  .class_table {
    .coupon_a {
      display: block;
      font-size: 0;
      cursor: pointer;
      margin-top: 1px;

      span {

        display: inline-block;
        padding: 0 5px;
        background: #fd7100;
        color: #fff;
        font-size: 12px;
        background: linear-gradient(0deg, rgba(255, 75, 66, 1), rgba(255, 117, 60, 1));
        height: 20px;
        vertical-align: middle;
        line-height: 20px;
      }

      em {
        display: inline-block;
        padding: 0 8px;
        border: 1px solid #fd7100;
        color: #fd7100;
        font-size: 12px;
        height: 20px;
        vertical-align: middle;
        line-height: 18px;
      }
    }

    .goodsurl {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 18px;
      // font-weight: bolder;
      text-align: center;
      border-radius: 50%;
      // padding: 5px;
      color: gray;
      cursor: pointer;
      border: 1px solid gray;
    }

    .ant-table-row:hover {
      .goodsurl {
        background-color: green;
        color: #fff;
        // font-weight: bolder;
        border: none;
      }

      .quan {
        background-color: orange;
      }
    }
  }
</style>
